import React, { Component } from 'react';
import {Button, Col, DatePicker, Form, Icon, Input, Row, Select, Tree, TreeSelect} from 'antd';

const SearchFormItem = props => {
  const { form, children, fieldName } = props;
  const { getFieldDecorator } = form;
  return getFieldDecorator(fieldName, {})(children);
};

const { Option } = Select;

@Form.create()
class SearchForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expand: false,
      value: undefined
    }
  }

  componentDidMount() {
  }

  render() {
    const { form, provinceList, cityList, districtAndStreetList } = this.props;
    const { expand } = this.state;
    return (
      <div>
        <Row gutter={16}>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName="province_name">
              <Select placeholder="请选择省份" style={{ width: '100%' }} onChange={this.selectedProvince}>
                {provinceList && provinceList.length > 0 ? (provinceList.map((item,index)=>{
                  return (
                    <Option key={index} value={item.id}>
                      {item.name}
                    </Option>
                  )
                })):null}
              </Select>
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName="city_name">
              <Select allowClear placeholder="请选择市" style={{ width: '100%' }} onChange={this.selectedCity}>
                {cityList && cityList.length > 0 ? (cityList.map((item,index)=>{
                  return (
                    <Option key={index} value={item.id}>
                      {item.name}
                    </Option>
                  )
                })):null}
              </Select>
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName="region_name">
              <TreeSelect
                style={{ width: '100%' }}
                value={this.state.value}
                dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                treeData={districtAndStreetList}
                placeholder="请选择区县街道"
                allowClear
                onChange={this.selectedDistrictAndStreet}
              />
            </SearchFormItem>
          </Col>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName="org_name">
              <Input placeholder="请输入机构名称" allowClear />
            </SearchFormItem>
          </Col>
        </Row>
        <Row gutter={16} style={{ marginTop: '8px' }}>
          <Col className="gutter-row" span={6}>
            <SearchFormItem form={form} fieldName="ext_flag">
              <Select allowClear placeholder="请选择机构类型" style={{ width: '100%' }}>
                <Option value="1">管理机构</Option>
                <Option value="2">筛查机构</Option>
              </Select>
            </SearchFormItem>
          </Col>
          <Col span={18} style={{ textAlign: 'right', marginTop: '8px' }}>
            <Button type="primary" onClick={this.handleSearchClick}>
              查询
            </Button>
            <Button type="primary" style={{ marginLeft: 8 }} onClick={this.handleExportClick}>
              导出
            </Button>
            <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
              重置
            </Button>
            {/* <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.handleToggle}> */}
            {/*  {this.state.expand ? '折叠' : '展开'} */}
            {/*  <Icon type={this.state.expand ? 'up' : 'down'} /> */}
            {/* </a> */}
          </Col>
        </Row>
      </div>
    );
  }

  /**
   * 查询按钮被点击
   */
  handleSearchClick = () => {
    const { form, onSearchClick,  } = this.props;
    const data = form.getFieldsValue();
    if (onSearchClick) {
      onSearchClick(data);
    }
  };

  /**
   * 导出按钮被点击
   */
  handleExportClick = () => {
    const { onExportClick } = this.props;
    if (onExportClick) {
      onExportClick();
    }
  };

  /**
   * 重置按钮被点击
   */
  handleReset = () => {
    const { form, onResetClick } = this.props;
    form.resetFields();
    if (onResetClick) {
      onResetClick();
    }
  };

  /**
   *展开与否状态切换
   */
  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  /**
   * 用户选择了省份后保存省份id
   * */
  selectedProvince = value => {
    const { form, onSelectedProvince } = this.props;
    form.resetFields('city_name');
    if (onSelectedProvince) {
      onSelectedProvince(value);
    }
  }

  /**
   * 用户选择了城市后保存城市的id
   * */
  selectedCity = value => {
    const { form, OnSelectedCity } = this.props;
    // 清空选择
    form.resetFields('region_name')
    if (OnSelectedCity) {
      OnSelectedCity(value);
    }
  }

  /**
   * 用户不选择城市后，清空区域信息
   * */
  selectedDistrictAndStreet = () => {
    const { form } = this.props;
    form.resetFields('region_name')
  }
}

export default SearchForm;
